import type {ComponentConfig} from "@/lib/types"

export function generateFormComponent(config: ComponentConfig): string {
    const {name, description, features} = config

    // 检查是否启用了特定功能
    const hasValidation = features.some((f) => f.id === "validation" && f.enabled)
    const hasLifecycle = features.some((f) => f.id === "lifecycle" && f.enabled)

    return `<script setup lang="ts">
import { ref${hasLifecycle ? ", onMounted" : ""} } from 'vue';

/**
 * ${description || `${name} 表单组件`}
 */
interface FormData {
  username: string;
  email: string;
  password: string;
}

interface Props {
  submitLabel?: string;
  resetLabel?: string;
  showReset?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  submitLabel: '提交',
  resetLabel: '重置',
  showReset: true
});

const emit = defineEmits<{
  (e: 'submit', data: FormData): void;
  (e: 'reset'): void;
}>();

const formData = ref<FormData>({
  username: '',
  email: '',
  password: ''
});

${
        hasValidation
            ? `const errors = ref<Partial<Record<keyof FormData, string>>>({});

const validateForm = (): boolean => {
  const newErrors: Partial<Record<keyof FormData, string>> = {};
  
  if (!formData.value.username) {
    newErrors.username = '用户名不能为空';
  }
  
  if (!formData.value.email) {
    newErrors.email = '邮箱不能为空';
  } else if (!/^\\S+@\\S+\\.\\S+$/.test(formData.value.email)) {
    newErrors.email = '邮箱格式不正确';
  }
  
  if (!formData.value.password) {
    newErrors.password = '密码不能为空';
  } else if (formData.value.password.length < 6) {
    newErrors.password = '密码长度不能小于6位';
  }
  
  errors.value = newErrors;
  return Object.keys(newErrors).length === 0;
};`
            : ""
    }

const handleSubmit = () => {
  ${
        hasValidation
            ? `if (validateForm()) {
    emit('submit', formData.value);
  }`
            : `emit('submit', formData.value);`
    }
};

const handleReset = () => {
  formData.value = {
    username: '',
    email: '',
    password: ''
  };
  ${hasValidation ? "errors.value = {};" : ""}
  emit('reset');
};

${
        hasLifecycle
            ? `onMounted(() => {
  console.log('${name} 组件已挂载');
});`
            : ""
    }
</script>

<template>
  <form @submit.prevent="handleSubmit" class="space-y-4 p-6 bg-white rounded-lg shadow-md">
    <div class="space-y-2">
      <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
      <input
        id="username"
        v-model="formData.username"
        type="text"
        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
        ${hasValidation ? `:class="{ 'border-red-500': errors.username }"` : ""}
      />
      ${hasValidation ? `<p v-if="errors.username" class="text-sm text-red-600">{{ errors.username }}</p>` : ""}
    </div>
    
    <div class="space-y-2">
      <label for="email" class="block text-sm font-medium text-gray-700">邮箱</label>
      <input
        id="email"
        v-model="formData.email"
        type="email"
        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
        ${hasValidation ? `:class="{ 'border-red-500': errors.email }"` : ""}
      />
      ${hasValidation ? `<p v-if="errors.email" class="text-sm text-red-600">{{ errors.email }}</p>` : ""}
    </div>
    
    <div class="space-y-2">
      <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
      <input
        id="password"
        v-model="formData.password"
        type="password"
        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
        ${hasValidation ? `:class="{ 'border-red-500': errors.password }"` : ""}
      />
      ${hasValidation ? `<p v-if="errors.password" class="text-sm text-red-600">{{ errors.password }}</p>` : ""}
    </div>
    
    <div class="flex ${props.showReset ? "justify-between" : "justify-end"} pt-2">
      <button
        v-if="props.showReset"
        type="button"
        @click="handleReset"
        class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
      >
        {{ props.resetLabel }}
      </button>
      <button
        type="submit"
        class="px-4 py-2 text-white bg-primary rounded-md hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
      >
        {{ props.submitLabel }}
      </button>
    </div>
  </form>
</template>`
}
